<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=rt&cb=show"></script> -->
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#oul{
			list-style: none;
		}
		.olii{
			/*background: lightblue;*/
			font-size: 20px;
			padding-top: 5px;
		}
		.olii:hover{
			background: lightblue;
		}
		#div{
			width:580px;
			margin: 100px auto;
			text-align: center;
		}
		#txt{
			width: 580px;height: 50px;font-size:25px;
			border-radius: 5px;outline: none;
		}
		#oul{
			text-align: left;
		}

	</style>
	<script type="text/javascript">
		function show(json){
			oul.innerHTML='';
			json.s.forEach(item=>{
				let oli=document.createElement('li');
					oli.className='olii'
				let oul=document.getElementById('oul');
				let txt=document.getElementById('txt');
					oli.innerHTML=item;

					oul.appendChild(oli);

					oli.onclick=function(){
						txt.value=item;
						oul.innerHTML='';
					}


			})
		}

		window.onload=function(){

			let txt=document.getElementById('txt');

			txt.oninput=function(){
				let sq=document.createElement('script');

				sq.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${txt.value}&cb=show`;

				document.head.appendChild(sq);
			}
		}
	</script>

</head>

<body>
	<div id='div'>
	<input type="text" id="txt">
	<ul id="oul"></ul>
	</div>
</body>
</html>